<template>
    <el-button :loading="isLoading" @click="submitBtn" type="primary">{{ isLoading?(btnName+'中...'):btnName}}
    </el-button>
</template>

<script>
export default {
  props: {
    formName: {
      type: String,
      default: 'form'
    },
    btnName: {
      type: String,
      default: '提交'
    },
  },
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    //提交状态修改
    isLoadingChange(type = false) {
      this.isLoading = type
    },
    submitBtn() {
      this.isLoadingChange(true)
      this.$emit('submitForm')
    },
    //提交
    submitForm(formRef) {
      let isSubmit
      formRef.validate((valid) => {
        if (valid) {
          isSubmit = true
        } else {
          isSubmit = false
          this.isLoadingChange(false)
          this.$message.warning('请检查填写信息！')
          setTimeout(() => {
            document.getElementsByClassName('is-error')[0].scrollIntoView({
              behavior: 'smooth',
              block: 'center'
            })
          }, 0)
        }
      })
      return isSubmit
    },
  },
}
</script>

<style lang="scss" scoped></style>
